<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>POI标记</title>
    <style>
        body,#mapContainer{
            margin:0;
            height:100%;
            width:100%;
            font-size:12px;
        }
        .marker{
            width:22px;
            height:36px;
            background-image:url(http://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
            background-size: 22px 36px;
            text-align: center;
            line-height: 24px;
            color: #fff
        }
    </style>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e06178925b8ec4746ca36a53593d07dd&plugin=AMap.ToolBar"></script>
    <script>

        function init() {
            map = new AMap.Map("mapContainer", {
                zoom: 18,
                center:[116.473188,39.993253]
            });
            AMap.plugin('AMap.PlaceSearch',function(){
                var placeSearch = new AMap.PlaceSearch({
                    city:'010',
                    pageSize:5
                })
                placeSearch.search('图书馆',function(status,data){
                    if(status!=='complete')return;
                    var pois = data.poiList.pois;
                    for(var i=0;i<pois.length;i+=1){
                        var marker = new AMap.Marker({
                            content:'<div class="marker" >'+(i+1)+'</div>',
                            position:pois[i].location,
                            map:map,
                        })
                        marker.setLabel({
                            offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                            content: pois[i].name
                        });
                        marker.id= pois[i].id;
                        marker.name = pois[i].name;
                        marker.on('click',function(){
                            // map.detailOnAMAP({
                            //     id:this.id
                            // },marker)
                            map.poiOnAMAP({
                                name:this.name,
                                location:this.getPosition(),
                                id:this.id
                            })
                        })
                    }
                    map.setFitView();
                })
            })
            map.addControl(new AMap.ToolBar());
            if(AMap.UA.mobile){
                document.getElementById('button_group').style.display='none';
            }
        }
        //PlaceSearh插件同样支持poiOnMap与detailOnAMAP方法
    </script>
	</head>
	<body onload="init()">
    <div id="mapContainer" ></div>
    <div class="button-group" id='button_group' style='top:15px;bottom:inherit'>
        <img src="../img/二维码.jpg" style='width:120px;height:120px'>
        <div class='button' style='text-align: center'>手机扫码打开demo</div>
    </div>
</body>
</html>
